<template>
  <view class="hire_page">
    <scroll-view class="list-scroll" scroll-y="true"">
      <view class="container">
        <view v-for="(item, index) in list" :key="index" class="list-item" @click="switchTab(item)">
          <image class="pic" :src="item.pic" mode="" />
          <view style="flex: 1;">
            <view style="line-height: 52rpx;font-size: 36rpx;font-weight: 600;">{{ item.type_name }}</view>
            <view style="display: flex;justify-content: flex-end;margin-top: 8rpx;">
              <radio :checked="info.id === item.id" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="btn" @click="confirm" >确认</view>
  </view>
</template>
<script>
import { getMyNewCar } from '@/api/hire.js'



export default {
  data() {
    return {
      list: [],
      info: {}
    }
  },
  onLoad() {
    this.getMyNewCar()
  },
  methods: {
    confirm() {
      if (!this.info.id) return uni.showToast({ title: '请选择车型', icon: "none" })
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('getVeh', this.info);
      uni.navigateBack();
    },
    switchTab(info) {
      this.info = info;
    },
    getMyNewCar() {
      this.checkLoading(
        () => getMyNewCar().then(res => {
          this.list = res.data || [];
        })
      )
    },
    checkLoading(fn) {
      this.loading = true;
      uni.showLoading({ title: '加载中' })
      fn().finally(() => {
        this.loading = false;
        uni.hideLoading()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #F8F9FC;
  color: rgba(0, 0, 0, 0.9);
  .list-scroll {
    height: calc(100vh - 112rpx);
    .container {
      padding: 32rpx;
      .list-item {
        background-color: #FFFFFF;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        padding: 24rpx 32rpx;
        display: flex;
        gap: 24rpx;
        justify-content: flex-start;
        .pic {
          width: 230rpx;
          flex: 0 0 230rpx;
          height: 120rpx;
        }
      }
    }
  }
  .btn {
    margin: 8rpx 32rpx;
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
  }
}




</style>